<template>
    <div class="news-component">
        <t-list :split="true" :scroll="{ type: 'virtual', threshold: 5 }">
            <t-list-item v-for="(news, idx) in effectiveNewsList" :key="idx">
                <t-list-item-meta
                        :image="news.image || imageUrl"
                        :title="news.title"
                >
                    <template #description>
                        <p>{{ news.publishTime }} {{ news.source ? ' · ' + news.source : '' }}</p>
                    </template>
                </t-list-item-meta>
            </t-list-item>
        </t-list>
    </div>
</template>

<script setup>
    import { defineProps, computed } from 'vue';

    const props = defineProps({
        item: {
            type: Object,
            required: true,
        },
    });

    const imageUrl = 'https://tdesign.gtimg.com/demo/demo-image-2.png'; // 默认图片

    const effectiveNewsList = computed(() => {
        return props.item.newsList || [
            {
                title: '默认新闻标题（示例）',
                publishTime: new Date().toLocaleDateString(),
                source: '系统',
                image: '',
            },
            {
                title: '默认新闻标题2（示例）',
                publishTime: new Date().toLocaleDateString(),
                source: '系统',
                image: '',
            },
            {
                title: '默认新闻标题3（示例）',
                publishTime: new Date().toLocaleDateString(),
                source: '系统',
                image: '',
            },
            {
                title: '默认新闻标题4（示例）',
                publishTime: new Date().toLocaleDateString(),
                source: '系统',
                image: '',
            },{
                title: '默认新闻标题4（示例）',
                publishTime: new Date().toLocaleDateString(),
                source: '系统',
                image: '',
            },{
                title: '默认新闻标题4（示例）',
                publishTime: new Date().toLocaleDateString(),
                source: '系统',
                image: '',
            },{
                title: '默认新闻标题4（示例）',
                publishTime: new Date().toLocaleDateString(),
                source: '系统',
                image: '',
            },
        ];
    });
</script>

<style scoped>
    .news-component {
        box-sizing: border-box;
        overflow: auto;
    }
</style>
